<script>
// blockly组件
import * as Blockly from 'blockly';
import * as Zh from 'blockly/msg/zh-hans';
import {
    pythonGenerator
} from 'blockly/python';

// 自定义的组件
import './blockly/pythonGenerator.js';

import {
    CustomCategory
} from './blockly/CustomCategory';

import {
    toolbox
} from './blockly/toolbox';

import {
    myblocks
} from './blockly/blocks';

import {
    save,
    load
} from './blockly/serialization';

export default {
    deta() {
        return {
            ws
        }
    },
    methods: {
        runCode() {
            const codeDiv = this.$refs['generatedCode']
            const code = pythonGenerator.workspaceToCode(this.ws);
            codeDiv.innerText = code;
        }
    },
    mounted: function () {
        // 设置UI元素并注入block
        const codeDiv = this.$refs['generatedCode']
        const blocklyDiv = this.$refs['blocklyDiv']

        // 配置语言环境
        Blockly.setLocale(Zh);

        // 设置自定义的的类别
        Blockly.registry.register(
            Blockly.registry.Type.TOOLBOX_ITEM,
            Blockly.ToolboxCategory.registrationName,
            CustomCategory, true);

        // 挂载代码区
        this.ws = Blockly.inject(blocklyDiv, {
            toolbox,
            grid: {
                spacing: 20,
                length: 3,
                colour: '#ccc',
                snap: true
            },
            trashcan: true
        });

        // 事件
        // 每次工作区更改状态时，将更改保存到存储中。
        this.ws.addChangeListener((e) => {
            // UI事件包括滚动，缩放等。
            if (e.isUiEvent) return;
            save(this.ws);
        });

        // 每当工作空间发生有意义的变化时，再次运行代码。
        this.ws.addChangeListener((e) => {
            // 不要在工作空间加载完成时运行代码;我们已经在应用程序启动时运行了一次。不要在拖拽期间运行代码;我们可能会有无效状态。
            if (e.isUiEvent || e.type == Blockly.Events.FINISHED_LOADING ||
                this.ws.isDragging()) {
                return;
            }
            var toolbox = Blockly.common.getMainWorkspace().getToolbox();
            console.log(toolbox.getToolboxItems()[0]);
            this.runCode();
        });

        // 定义主题
        const theme = Blockly.Theme.defineTheme('mainTheme', {
            'base': Blockly.Themes.Classic,
            'categoryStyles': {
                "mihome_category": {
                    "colour": "10"
                },
                "time_category": {
                    "colour": "195"
                }
            }
        });

        // 设置主题
        this.ws.setTheme(theme)

        // 加载block
        Blockly.defineBlocksWithJsonArray(myblocks);

        // 从存储中加载初始状态并运行代码。
        load(this.ws);

        // 初始化
        const code = pythonGenerator.workspaceToCode(this.ws);
        codeDiv.innerText = code;
    }
}
</script>

<template>
<div id="app">
    <div id="pageContainer" ref="pageContainer">
        <!-- 功能区 -->
        <div id="outputPane" ref="outputPane">
            <pre id="generatedCode" ref="generatedCode">
              <code></code>
            </pre>
        </div>
        <!-- 工作区 -->
        <div id="blocklyDiv" ref="blocklyDiv"></div>
    </div>
</div>
</template>

<style>
body {
    margin: 0;
    max-width: 100vw;
}

pre,
code {
    overflow: auto;
}

#pageContainer {
    display: flex;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
}

#blocklyDiv {
    flex-basis: 100%;
    height: 100%;
    min-width: 600px;
}

#outputPane {
    display: flex;
    flex-direction: column;
    width: 400px;
    flex: 0 0 400px;
    overflow: auto;
    margin: 1rem;
}

#generatedCode {
    height: 100%;
    background-color: rgb(247, 240, 228);
}

.blocklyTreeLabel {
    color: white;
}

.blocklyToolboxContents {
    padding: 0.5em;
}

.blocklyTreeRow {
    padding: 3px;
    margin-bottom: 0.5em;
    border-radius: 4px;
    height: initial;
}

.customIcon {
    color: white;
}

.blocklyTreeRowContentContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
}
</style>
